<link rel="stylesheet" href="/assets/home/plugin/ckplayer/css/ckplayer.css" />
<link rel="stylesheet" href="/assets/home/css/details.css" />
<!-- 加载ckplayer视频插件 -->
<script src="/assets/home/plugin/ckplayer/js/ckplayer.js"></script>
<script src="/assets/home/js/jquery-1.9.1.min.js"></script>

<body>
    <div id="cover">
        <!-- 课程封面 -->
        <img class="cover_bg" src="{$subject.thumbs_text}" />
        <!-- 中间播放键 -->
        <div id="play">
            <img src="/assets/home/images/play.png" />
        </div>
    </div>

    <!-- ckplayer视频容器元素 -->
    <div id="video"></div>

    <!-- 课程信息 -->
    <div class="head">
        <div class="info">
            <h4 class="name">{$subject.title}</h4>
            <div class="action">
                {if condition="$subject.like_status"}
                <!-- 已点赞 -->
                <img id="like" data-status="remove" class="thumbs" src="/assets/home/images/thumbs-up.png" alt="">
                {else /}
                <!-- 未点赞 -->
                <img id="like" data-status="add" class="thumbs" src="/assets/home/images/thumbs.png" alt="">
                {/if}
                <span class="num">{$subject.likes_text}</span>
            </div>
        </div>
    </div>

    <div class="title">课程信息</div>
    <table class="list">
        <tr>
            <td>课程名称</td>
            <td>{$subject.title}</td>
        </tr>
        <tr class="price">
            <td>课程价格</td>
            <td>￥{$subject.price}元</td>
        </tr>
        <tr>
            <td>发布时间</td>
            <td>{$subject.createtime_text}</td>
        </tr>
        <tr>
            <td>章节总数</td>
            <td>{$chapter|count}小节</td>
        </tr>
    </table>

    <div class="title">课程介绍</div>
    <div class="mui-table-view content">{$subject.content}</div>

    <div class="title">课程章节</div>
    <ul id="chapter" class="mui-table-view">
        {if condition="$chapter"}
        {foreach $chapter as $key=>$item}
        <li data-cid="{$item.id}" class="item mui-table-view-cell">第{$key + 1}节 - {$item.title}</li>
        {/foreach}
        {else /}
        <li class="mui-table-view-cell">暂无课程章节</li>
        {/if}
    </ul>


    <!-- 评论内容 -->
    {if condition="$comment"}
    <div class="title">用户评论</div>

    <ul class="mui-table-view">
        {foreach $comment as $item}
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left userimg" src="{$item.business.avatar_text}">
                <div class="mui-media-body">
                    {$item.business.nickname ? $item.business.nickname : '匿名'}
                    <p class='mui-ellipsis'>{$item.content}</p>
                </div>
            </a>
        </li>
        {/foreach}
    </ul>

    <div class="more">
        <a href="{:url('home/index/comment_list',['subid' => $item['subid']])}"
            class="mui-btn mui-btn-primary mui-btn-outlined">查看更多评论</a>
    </div>
    {/if}

    <!-- 弹出菜单 -->
    <div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action">
        <!-- 可选择菜单 -->
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a id="buy" href="javascript:void(0)">
                    立即购买
                </a>
            </li>
        </ul>
        <!-- 取消菜单 -->
        <ul class="mui-table-view">
            <li class="mui-table-view-cell">
                <a href="#sheet1"><b>取消</b></a>
            </li>
        </ul>
    </div>

    <!-- 底部 -->
    {include file="common/menu" /}
</body>

<script>
    // -------------- 点击播放（购买课程）功能 --------------
    /**
     * 主要逻辑思路
     * 
     * 一、订单验证
     * 在后端通过当前课程id、章节id、用户id，查询订单表中是否存在该用户购买本视频记录
     * （课程id、章节id、用户id） ->  订单表  购买记录 
     *  
     * 二、购买课程
     * 没有记录说明没有购买，提示用户购买
     * 有两种情况：
     * （用户.余额 —— 课程.价钱） >= 0  说明用户余额充足，购买成功 回到前端准备播放视频
     * （用户.余额 —— 课程.价钱） <  0  说明用户余额不足，购买失败 跳转到充值界面，充值后回到本界面
     * 
     * 三、播放视频
     * 前端通过返回数据和视频播放插件 进行视频播放
     * 
     */

    // 公共资源定义
    // 课程id
    var subid = `{$subject.id}`
    // 章节id 
    var cid = 0;
    // 播放器变量
    var player;


    // 点击播放按钮（先去后端效验是否购买过该课程）
    $("#play").on('click', function () {
        // 发送ajax请求（向php中传送课程id、章节id）
        $.ajax({
            url: `{:url('home/index/play')}`,  // index中的方法名play()
            type: 'post',
            data: { subid, cid },                 // 课程id、章节id
            dataType: 'json',
            success: function (success)         // 回调函数 success后端返回的数据
            {
                if (success.code == 0) {
                    mui.toast(success.msg)
                    return false;
                }

                // 返回的数据
                var data = success.data

                // 没购买，要弹出购买菜单
                if (data.hasOwnProperty('status') && data.status == 'buy') {
                    mui('#sheet1').popover('toggle');
                    return false;
                }

                $("#video").css("display", "block")
                $("#cover").css("display", "none");

                //准备播放
                var options = {
                    container: '#video', // 容器
                    video: data.url, // 播放地址
                    autoplay: true,// 是否自动播放
                    webFull: true,// 是否启用页面全屏按钮，默认不启用
                    theatre: true,// 是否启用剧场模式按钮，默认不启用
                    controls: true,// 是否显示自带控制栏
                    rightBar: true,// 是否开启右边控制栏
                    smallWindows: true,// 是否启用小窗口模式
                    smallWindowsDrag: true,// 小窗口开启时是否可以拖动
                    screenshot: true,// 截图功能是否开启
                    playbackrateOpen: true,// 是否开启控制栏倍速选项
                    playbackrateList: [0.75, 1, 1.25, 1.5, 2, 4],// 倍速配置值
                    timeScheduleAdjust: 1,// 是否可调节播放进度,0不启用，1是启用，2是只能前进（向右拖动），3是只能后退，4是只能前进但能回到第一次拖动时的位置，5是看过的地方可以随意拖动
                }

                player = new ckplayer(options);//初始化播放器
            },
        })

    })


    // 立即购买按钮点击事件
    $("#buy").on('click', function () {
        mui('#sheet1').popover('toggle');
        var btnArray = ['否', '是'];
        mui.confirm('请问您确认购买吗？', '尊敬的用户', btnArray, function (e) {
            if (e.index == 1) {
                $.ajax({
                    url: `{:url('home/index/buy')}`,
                    type: 'post',
                    data: { subid },
                    dataType: 'json',
                    success: function (success) {
                        if (success.code == 0) {
                            mui.toast(success.msg)
                            return false
                        }

                        mui.toast(success.msg)

                        setTimeout(() => {
                            location.reload()
                        }, 1000)
                    }
                })
            }
        })
    })


    // 点击切换章节方法（获取点击的章节id，替换公共的课程id subid ，修改css样式）
    $("#chapter .item").click(function () {
        // 获取#chapter .item标签上的自定义 data—cid 属性的值（章节id）
        cid = $(this).data('cid')

        // 修改样式（点击切换颜色）
        $(this).css('color', 'blue').siblings().css('color', 'black')
        // 显示播放按钮
        $("#video").css("display", "none")
        $("#cover").css("display", "block");

        if (player) {
            player.pause()
        }
    })

    // 购买弹框  取消按钮点击事件
    $("#iosActionsheetCancel").click(function () {
        mui('#sheet1').popover('toggle');
    })



    // -------------- 点赞功能 --------------
    $("#like").click(function () {
        var subid = `{$subject.id}`

        //获取到点赞状态
        var status = $(this).data('status')

        //发送ajax请求进行点赞
        $.ajax({
            url: `{:url("home/index/like")}`,
            type: 'post',
            data: { subid, status },
            dataType: 'json',
            success: function (success) {
                mui.toast(success.msg, { duration: 500 })

                setTimeout(() => {
                    location.reload()
                }, 500)
            }
        })
    })
</script>